<!DOCTYPE html>
<html>
<head>
	<title>剪刀石头布</title>
	<style type="text/css">
	#main{
		width: 520px;
		margin: 100px auto;
		text-align: center;
	}
	.imgk{
		cursor: pointer;
		border:none;
		width: 167px;
		height: 133px;
	}
	#result{
		margin-top: 30px;
		text-align: center;
	}
	#result>div{
		display: inline-block;
		position: relative;
	}
	#result>div>span{
		position: absolute;
		top:-20px;
	}
	#count{
		margin-top: 30px;
	}
	</style>
</head>
<body>
<div id="main">
	<div id="select">
		<img class="imgk"  id="s1" src="jiandao.png">
		<img class="imgk"  id="s2" src="shitou.png">
		<img  class="imgk" id="s3" src="bu.png">
	</div>
	<div id="result">
		<div><span>your</span>
		<img  class="imgk" id="mine">
		</div>
		<div><span>电脑</span>
		<img  class="imgk" id="cpt">
		</div>
	</div>
	<div id="count">
		你总共赢了<span id="count1">0</span>次
	</div>
</div>
	<script type="text/javascript">
		window.onload=function (e) {

			var selects=['s1','s2','s3'];
			var pngs=['jiandao','shitou','bu'];
			function doc(id) {
				return document.getElementById(id);
			}
			function count(cpt,human) {
				if((cpt-human+3)%3==2)
					// console.log("赢了");
					doc('count1').innerHTML=doc('count1').innerHTML*1+1;
			}
			function cptGo(human) {
				setTimeout(function () {
					var cpt=doc('cpt');
					var result=Math.floor(Math.random()*3);
					cpt.setAttribute('src',pngs[result]+".png");
					count(result,human)
					cpt.style.opacity=1;
				}, 1000);
			}
			selects.forEach(function (item,index) {
				doc(item).addEventListener('click',function (e) {
					var src=doc(item).getAttribute('src');
					doc('mine').setAttribute('src',src);
					var cpt=doc('cpt');
					cpt.removeAttribute('src');
					cpt.style.opacity=0;
					cptGo(index);
				});
			});
			
		}
	</script>
</body>
</html>